<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <!-- bootstrap css v5.2.3 -->
    <link rel="stylesheet" type="text/css" href="vendors/bootstrap/css/bootstrap.css">
    
    <link rel="stylesheet" type="text/css" href="resources/css/custom.css" />
    
    <!-- dark-mode-switch css -->
    <link rel="stylesheet" href="vendors/dark-mode-switch/css/dark-mode.css">
    
    <!-- jquery js -->
    <script type="text/javascript" src="vendors/jquery/jquery-3.6.0.min.js"></script>
    <!-- popperjs/core v2.11.6 -->
    <script type="text/javascript" src="vendors/popper/popper.min.js"></script>
    <!-- bootstrap js v5.2.3 -->
    <script type="text/javascript" src="vendors/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- daterange picker | https://github.com/dangrossman/daterangepicker -->
    <script type="text/javascript" src="vendors/daterangepicker/moment.min.js"></script>
    <script type="text/javascript" src="vendors/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="vendors/daterangepicker/daterangepicker.css"/>
    
    <!-- d3 js -->
    <script src="vendors/d3/d3.v7.8.4.min.js"></script>
    
    <!-- Hull.js -->
    <script type="text/javascript" src="vendors/hull/hull.js"></script>
    <!-- simpleheat.hs -->
    <script type="text/javascript" src="vendors/simpleheat/simpleheat.js"></script>
    <!-- exported graph representations as js -->
    <script type="text/javascript" src="resources/js/emerge_data.js"></script>
    
    <!-- emerge git functionality -->
    <script type="text/javascript" src="resources/js/emerge_git.js"></script>
    
    <!-- emerge heatmap functionality -->
    <script type="text/javascript" src="resources/js/emerge_heatmap.js"></script>
    
    <!-- emerge search functionality -->
    <script type="text/javascript" src="resources/js/emerge_search.js"></script>
    
    <!-- emerge graph functionality -->
    <script type="text/javascript" src="resources/js/emerge_graph.js"></script>
    
    <!-- emerge common functionality -->
    <script type="text/javascript" src="resources/js/emerge_common.js"></script>
    
</head>

<body>
    <div id="graphDiv"></div>
    
    <div id="cardMenu" class="card border-dark">
        <h6 class="card-header align-items-center text-center">
            <span aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bounding-box-circles" viewBox="0 0 16 16">
                    <path d="M2 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM0 2a2 2 0 0 1 3.937-.5h8.126A2 2 0 1 1 14.5 3.937v8.126a2 2 0 1 1-2.437 2.437H3.937A2 2 0 1 1 1.5 12.063V3.937A2 2 0 0 1 0 2zm2.5 1.937v8.126c.703.18 1.256.734 1.437 1.437h8.126a2.004 2.004 0 0 1 1.437-1.437V3.937A2.004 2.004 0 0 1 12.063 2.5H3.937A2.004 2.004 0 0 1 2.5 3.937zM14 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM2 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                </svg>                
                <span>
                    <small> <strong><span id="configEmergeVersion" style="padding-left: 2px;"></span></strong></small>
                </span>
            </span>
        </h6>
        
        <div class="card-body">
            <ul class="list-group list-group-flush">
                <li class="list-group-item small d-flex justify-content-between align-items-center py-1">
                    
                    <div class="form-check form-switch float-right"> 
                        <input type="checkbox" class="form-check-input" id="darkSwitch">
                        <label class="form-check-label" for="darkSwitch"><small>Dark Mode</small></label>
                    </div>
                    
                </li>
                
                <li class="list-group-item small d-flex justify-content-between align-items-center medium-tooltip">
                    <small><span id="projectInfo">Project info</span></small> <span id="badge_project_info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span></span>
                </li>
                
                <li class="list-group-item small d-flex justify-content-between align-items-center">
                    <small><span id="graphProperties">Graph properties</span></small> <span id="badge_graph_info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span></span>
                </li>
                
            </ul>
            
            <div id="menuButtonGroup" class="btn-group-vertical" style="min-width: 80px;">
                <div class="btn-group dropstart">
                    
                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle btn-with-spacing shadow-none" id="selectGraphButton" data-bs-toggle="dropdown">
                        <span id="selectedGraph">selected graph</span>
                    </button>
                    
                    <div class="dropdown-menu" id="dropdown-graph" aria-labelledby="dropdown-graph">
                        <!-- injected by JS -->
                    </div>
                    
                </div>
                
                <button type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" onclick="toggleNodeLabels();">
                    <span aria-hidden="true">
                        <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-info-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
                            <circle cx="8" cy="4.5" r="1"/>
                        </svg>
                    </span>
                    Toggle node labels
                </button>
                
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-right shadow-none" onclick="decreaseCurrentChargeForce();">
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-minus-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path fill-rule="evenodd" d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z"/>
                            </svg>
                        </span>
                        force
                    </button>
                    <button type="button" class="btn-right-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-left shadow-none" onclick="increaseCurrentChargeForce();">
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-plus-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                            </svg>
                        </span>
                        force
                    </button>
                </div>
                
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-right shadow-none" onclick="zoomOut();">
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-zoom-out" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                                <path d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/>
                                <path fill-rule="evenodd" d="M3 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
                            </svg>
                        </span>
                        zoom
                    </button>
                    
                    <button type="button" class="btn-right-aligned btn btn-primary btn-sm btn-with-spacing btn-with-spacing-left shadow-none" onclick="zoomIn();">
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-zoom-in" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                                <path d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/>
                                <path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"/>
                            </svg>
                        </span>
                        zoom
                    </button>
                </div>
                
                <button type="button" class="btn btn-primary btn-sm btn-with-spacing shadow-none" onclick="translateCanvas('up')">
                    <span aria-hidden="true">
                        <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-up-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
                        </svg>
                    </span>
                </button>
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-primary btn-sm btn-with-spacing btn-with-spacing-right shadow-none" onclick="translateCanvas('left')">
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-left-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
                            </svg>
                        </span>
                    </button>
                    <button type="button" class="btn btn-primary btn-sm btn-with-spacing btn-with-spacing-left  shadow-none" onclick="translateCanvas('right')">
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-right-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5A.5.5 0 0 0 4 8z"/>
                            </svg>
                        </span>
                    </button>
                </div>
                <button type="button" class="btn btn-primary btn-sm btn-with-spacing shadow-none" onclick="translateCanvas('down')">
                    <span aria-hidden="true">
                        <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-arrow-down-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"/>
                        </svg>
                    </span>
                </button>
                <button id="buttonShowOverallStatistics" type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#overallStatisticsModal">
                    <span aria-hidden="true">
                        <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </span>
                    Overall statistics
                </button>
                <!-- Modal -->
                <div class="modal fade" id="overallStatisticsModal" tabindex="-1" role="dialog" aria-labelledby="overallStatisticsModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="overallStatisticsModalLabel">Overall statistics</h5>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <table class="card-table table table-condensed">
                                    <thead class="table-borderless">
                                        <tr>
                                            <th scope="col">Statistic</th>
                                            <th scope="col">Value</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody-statistics">
                                        <!-- injected by js -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end modal -->
                
                <button type="button" id="buttonShowOverallMetrics" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#overallMetricsModal">
                    <span aria-hidden="true">
                        <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </span>
                    Overall metrics
                </button>
                
                <div class="btn-group dropstart">
                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle btn-with-spacing" data-bs-toggle="dropdown"><span></span> <span class="caret"></span>Apply metrics</button>
                    <ul id="dropdown-apply-metric" class="dropdown-menu">
                        <!-- injected by js -->
                    </ul>
                </div>
                
                <div style="width: 100%; padding-top: 4px; padding-bottom: 0px;"></div>
                
                <ul class="list-group list-group-flush">
                    
                    <!-- Shortcuts -->
                    <li class="list-group-item small d-flex justify-content-between align-items-center" style="border: 0px; margin-bottom: 0px; padding-left: 0px;">
                        <label style="margin-bottom: 0px; padding-right: 4px;"> <small>Shortcuts</small> </label> <span id="badge_shortcuts" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary" customClass="large-tooltip"> ?</span>
                    </li>
                    
                    <li id="li-unselected-opacity" class="list-group-item small d-flex justify-content-between align-items-center py-1" style="border: 0px; margin-bottom: 0px; padding-left: 0px; padding-bottom: 0px;">
                        <small>Unselected opacity</small> <span id="badge_unselected_opacity" style="margin-left: 4px;" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span>
                    </li>
                    <input type="range" min="1" max="100" value="20" class="form-range" id="unselected-opacity" oninput="unselectedOpacityChange(this.value)" onchange="unselectedOpacityChange(this.value)">
                    
                    <!-- Git settings -->
                    <div id="container_git_settings">
                        <div style="width: 100%; padding-top: 4px; padding-bottom: 0px;"></div>
                        <li class="list-group-item small d-flex justify-content-between align-items-center py-1 disabled" style="max-height: 24px; border: 0px; margin-bottom: 0px; padding-left: 0px;">
                            <small style="font-size: 10px;">Git settings </small>
                            <div class="form-group" style="width: 50%;">
                                <hr>
                            </div>
                        </li>
                        
                        <div class="input-group mb-1 input-group-sm">
                            <input class="form-control form-control-sm" type="text" name="daterange" placeholder="pick date range" id="timeDateRangePicker" style="font-size: 9px;" />
                            <button class="btn btn-primary " type="button" id="inputDateRangePickerCancel" onclick="clickDateRangePickerCancel()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bootstrap-reboot" viewBox="0 0 16 16">
                                    <path d="M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z"/>
                                    <path d="M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352h1.141zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6z"/>
                                </svg>
                            </button>
                        </div>
                        
                        <div style="width: 100%; padding-top: 6px; padding-bottom: 0px;"></div>
                    </div>
                    
                    <!-- time series modal -->
                    <!-- Modal -->
                    <div class="modal fade" id="timeSeriesModal" tabindex="-1" aria-labelledby="timeSeriesModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="timeSeriesModalLabel">Complexity/churn growth</h1>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    
                                    <div id="my_dataviz_chord"></div>
                                    <br>
                                    
                                    <div id="my_dataviz"></div>
                                    <br>

                                    <div id="time_series_sloc"></div>
                                    <br>

                                    <div id="my_dataviz2"></div>
                                    
                                    
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button id="button_complexity_churn" type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#timeSeriesModal" onclick="generateTimeSeriesChart()" >
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
                            </svg>
                        </span>
                        Compl/SLOC/Churn
                    </button>
                    
                    <!-- time series modal -->
                    <!-- Modal -->
                    <div class="modal fade" id="changeCouplingModal" tabindex="-1" aria-labelledby="changeCouplingModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="changeCouplingModalLabel">Change Coupling</h1>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    
                                    <div id="change_coupling_chord_diagram"></div>
                                    
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button id="button_change_coupling" type="button" class="btn-left-aligned btn btn-primary btn-sm btn-with-spacing shadow-none" data-bs-toggle="modal" data-bs-target="#changeCouplingModal" onclick="generateChangeCouplingChart()" >
                        <span aria-hidden="true">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
                            </svg>
                        </span>
                        Change Coupling
                    </button>

                    <div style="width: 100%; padding-top: 4px; padding-bottom: 0px;"></div>

                    <div id="formSwitchHoverCoupling" class="form-check form-switch small float-right" style="width: 100%;"> 
                        <input type="checkbox" class="form-check-input" id="switchHoverCoupling">
                        <label class="form-check-label d-flex justify-content-between" for="switchHoverCoupling"><small>Hover coupling</small> <span id="badge_hover_coupling" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
                    </div>

                    <li class="list-group-item small d-flex justify-content-between align-items-center disabled" style="max-height: 24px; border: 0px; margin-bottom: 0px; padding-left: 0px;">
                        <small style="font-size: 10px;">Heatmap settings </small>
                        <div class="form-group" style="width: 38%; padding: 0px;">
                            <hr>
                        </div>
                    </li>
                    
                    <div class="form-check form-switch small float-right"> 
                        <input type="checkbox" class="form-check-input" id="switchActivateHeatmap">
                        <label class="form-check-label d-flex justify-content-between" for="switchActivateHeatmap"><small>Normal Heatmap </small> <span id="badge_heat_map_normal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
                    </div>
                    
                    <div class="form-check form-switch small float-right"> 
                        <input type="checkbox" class="form-check-input" id="switchMergeHeatmap">
                        <label class="form-check-label d-flex justify-content-between" for="switchMergeHeatmap"><small>Hybrid Heatmap</small> <span id="badge_heat_map_hybrid" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
                    </div>
                    
                    <div id="formSwitchChurnHeatmap" class="form-check form-switch small float-right"> 
                        <input type="checkbox" class="form-check-input" id="switchChurnHeatmap">
                        <label class="form-check-label d-flex justify-content-between" for="switchChurnHeatmap"><small>Churn Heatmap </small> <span id="badge_heat_map_churn" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
                    </div>
                    
                    <div id="formSwitchHotspotHeatmap" class="form-check form-switch small float-right"> 
                        <input type="checkbox" class="form-check-input" id="switchHotspotHeatmap">
                        <label class="form-check-label d-flex justify-content-between" for="switchHotspotHeatmap"><small>Hotspot Heatmap </small> <span id="badge_heat_map_hotspot" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
                    </div>
                    
                    <div style="width: 100%; padding-top: 6px; padding-bottom: 0px;"></div>
                    
                    <label id="inputNodeSearchLabel" for="inputNodeSearch">0 nodes found</label>
                    
                    <div class="input-group mb-1 input-group-sm">
                        <input id="inputNodeSearch" type="text" class="form-control" placeholder="Search nodes" aria-label="Search" aria-describedby="search-addon">
                        <button class="btn btn-primary " type="button" id="inputNodeSearchCancel">
                            <svg width="16px" height="16px" viewBox="0 0 18 18" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                            </svg>
                        </button>
                        
                        <div style="width: 100%; padding-top: 8px; padding-bottom: 0px;"></div>
                        <div class="form-check form-switch small float-right" style="width: 100%;"> 
                            <input type="checkbox" class="form-check-input" id="switchAddSemanticSearch">
                            <label class="form-check-label d-flex justify-content-between" for="switchAddSemanticSearch"><small>Add semantics</small> <span id="badge_semantic_search" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
                        </div>
                        
                        <div id="formSwitchAddContributorSearch" class="form-check form-switch small float-right" style="width: 100%;"> 
                            <input type="checkbox" class="form-check-input" id="switchAddContributorSearch">
                            <label class="form-check-label d-flex justify-content-between" for="switchAddContributorsSearch"><small>Add contributors</small> <span id="badge_contributors_search" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary"> ?</span> </label>
                        </div>
                        
                    </div>
                    
                    <li class="list-group-item small d-flex justify-content-between align-items-center" style="padding-left: 0px; padding-right: 1px;" >
                        <label style="margin-bottom: 0px; font-size: 10px;"> Hover/select cluster hulls </label> <span id="badge_cluster_hulls" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" class="badge rounded-pill text-bg-primary" customClass="large-tooltip"> ?</span>
                    </li>
                    
                    <div id="clusterHullMenu">
                        <!-- cluster hull selection / injected by javascript -->
                    </div>
                    
                </ul>
                
            </div>
            
            <!-- Modal -->
            <div class="modal fade" id="overallMetricsModal" tabindex="-1" role="dialog" aria-labelledby="overallMetricsModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Overall metrics</h1>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        
                        <div class="modal-body">
                            <table class="card-table table table-condensed">
                                <thead class="table-borderless">
                                    <tr>
                                        <th scope="col">Metric</th>
                                        <th scope="col">Value</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-metrics">
                                    <!-- injected by js -->
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- end modal -->
            
            <div class="toast-container position-fixed top-0 start-0 p-3">
                <div id="toastDateRangeUpdated" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3500">
                    <div class="d-flex">
                        <div class="toast-body small">
                            Git date range updated, metrics, visualizations and graph structures may have changed.
                        </div>
                        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            
            <div class="toast-container position-fixed top-0 start-0 p-3">
                <div id="toastDebug" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
                    <div class="d-flex">
                        <div id="toastDebugMessage" class="toast-body small">
                            text
                        </div>
                        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            
        </div>
        
        <script src="vendors/dark-mode-switch/js/dark-mode-switch.min.js"></script>
        
        <!-- emerge basic ui/descriptions -->
        <script type="text/javascript" src="resources/js/emerge_ui.js"></script>
        
        <!-- emerge hull functionality -->
        <script type="text/javascript" src="resources/js/emerge_hull.js"></script>
        
        <!-- emerge main functionality -->
        <script type="text/javascript" src="resources/js/emerge_main.js"></script>
        
    </div>
    
</body>